import React from 'react'
import { Flex } from 'antd-mobile'
import { bindActionCreators } from 'redux'
import { connect } from 'react-redux'
import * as filtersActionCreator from '../../../../store/actionCreators/filtersActionCreators'

import styles from './index.module.css'

// 条件筛选栏标题数组：
const titleList = [
  { title: '区域', type: 'area' },
  { title: '方式', type: 'mode' },
  { title: '租金', type: 'price' },
  { title: '筛选', type: 'more' }
]

function FilterTitle(props) {
  return (
    <Flex align="center" className={styles.root}>
      {titleList.map(item => {
        const isSelected = props.selectTitleValue[item.type]
        return (
          <Flex.Item
            key={item.type}
            onClick={() => {
              props.setOpenType(item.type)
              props.setSelectTitleObj({ [item.type]: true })
            }}
          >
            {/* 选中类名： selected */}
            <span
              className={[
                styles.dropdown,
                isSelected ? styles.selected : ''
              ].join(' ')}
            >
              <span>{item.title}</span>
              <i className="iconfont icon-arrow" />
            </span>
          </Flex.Item>
        )
      })}
    </Flex>
  )
}

const mapStateToProps = ({ filters: { selectTitleValue, openType } }) => {
  return { selectTitleValue, openType }
}

const mapDispatchToProps = dispatch => {
  return bindActionCreators(filtersActionCreator, dispatch)
}

export default connect(
  mapStateToProps,
  mapDispatchToProps
)(FilterTitle)
